import React, { Component } from 'react'
import store from '../redux/store'
import { createAddAction,createAsyncAddAction,createAsyncReduceAction, createReduceAction } from '../redux/count_action';

export default class Count extends Component {

    componentDidMount() {
        store.subscribe(() => {
            console.log("store change")
            // this.setState({})
        });
    }

    add = () => {
        const { value } = this.selectedNum
        // store.dispatch({ type: '+', data: Number(value) })
        store.dispatch(createAddAction(Number(value) ))
        // this.setState({})
    }
    reduce = () => {
        const { value } = this.selectedNum
        // store.dispatch({ type: '-', data: Number(value) })
        store.dispatch(createReduceAction(Number(value) ))
    }

    asyncAdd = () => {
        const { value } = this.selectedNum
        store.dispatch(createAsyncAddAction(Number(value),1000 ))
    }
    asyncReduce = () => {
        const { value } = this.selectedNum
        store.dispatch(createAsyncReduceAction(Number(value),1000 ))
    }
    
    render() {
        return (
            <div>
                <h2>sum = {store.getState()}</h2>
                <select ref={c => this.selectedNum = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                &nbsp;
                <button onClick={this.add}>+</button> &nbsp;
                <button onClick={this.reduce}>-</button>&nbsp;
                <button onClick={this.asyncAdd}>异步+</button>&nbsp;
                <button onClick={this.asyncReduce}>异步-</button>
            </div>
        )
    }
}
